﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JS用鼠标選區-自己重写.aspx.cs" Inherits="js组件_JS用鼠标選區_自己重写" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <style type="text/css">
	.rectBox
	{
		background:#CCFFFF;
		border:2px solid #0099FF;
		filter:alpha(opacity=30);
		opacity:0.3;
		position:absolute;
	}
</style>
    
    <script type="text/javascript">
    
    /// <summary>
    /// 定义一个空间
    /// </summary>
    var Skybot={};
    

    Skybot.LayoutDraw=function(){
    /// <summary>
    /// 加入一个 可以画 框的类
    /// </summary> 
    
    ///得到当前的 Document 原素
    this.doc = document.documentElement;
    
        //如果没有原素就返回
        if(!this.doc)
        {
            return;
        }
    
    
        //定义 开始X坐标
        this.StartX = '';
        
        //定义 开始Y坐标
        this.StartY = '';
        
        //定义 框框
        this.RecDraw =null;
         
         //定义自己
         //把自己变成一个变量公开出去
          SelfRecDraw = this;
    
    }


    Skybot.LayoutDraw.prototype.showRecDraw = function(bool) {   /// <summary>
        /// 显示框框 
        /// </summary>
        /// <param name="bool">显示还是不显示 true,false</param>

        ///显示 框
        if (bool) {
            //看看有没有出 显示的框
            if (!this.RecBox) {
                //创建一个 DIV
                this.RecBox = document.createElement("div");

                //指定ID
                this.RecBox.id = "RecBoxLayoutDraw" + Math.random();
                this.RecBox.className = "rectBox";
                //添加到文档
                document.body.appendChild(this.RecBox);
            }
            //已经创建了 RecBox


            //显示成 块
            this.RecBox.style.display = "block";
            // 指定位置
            this.RecBox.style.left = this.StartX + "px";
            //指定位置
            this.RecBox.style.top = this.StartY + "px";
            
            
            //加入事件
            this.AddEventListener(this.doc, 'mousemove', this.Move)



        }
        else {
            //如果不显示
            if (this.RecBox) {
                // 不显示
                this.RecBox.style.display = "none";
            }
            //移除事件
            this.RemvoeEventListener(this.doc, "mousemove",this.Move);

        }


    }
    


    Skybot.LayoutDraw.prototype.Down = function(e) {
        /// <summary>
        /// 加入一个 可以画 框的类
        /// </summary>
        /// <param name="e">e 的变量  e?e:window.event;</param>
        
        //得到当前的  event 对像
    var e = e ? e : window.event;
    //开始邦定各属性的值

        //开始X坐标 初始化 
        SelfRecDraw.StartX = e.clientX?e.clientX+document.body.scrollLeft:e.pageX;

        //开始Y坐标 初始化 
        SelfRecDraw.StartY = e.clientY?e.clientY+document.body.scrollTop:e.pageY;
        
        //显示框框
        SelfRecDraw.showRecDraw(true);
    }
    
    
    Skybot.LayoutDraw.prototype.Up = function(e)
    {   /// <summary>
        /// 弹起
        /// </summary>
        /// <param name="e">e 的变量  e?e:window.event;</param>
        
        SelfRecDraw.RecBox.style.width='0px';
        SelfRecDraw.RecBox.style.height='0px';
        SelfRecDraw.showRecDraw(false);
    }

    Skybot.LayoutDraw.prototype.Move = function(e) {   
        /// <summary>
        /// 移动
        /// </summary>
        /// <param name="e">e 的变量  e?e:window.event;</param>

        //SelfRecDraw.RecBox.style.width='0px';


        if (SelfRecDraw.RecBox) {

            var currentX = e.clientX ? e.clientX + SelfRecDraw.doc.scrollLeft : e.pageX;

            
            var currentY = e.clientY ? e.clientY + SelfRecDraw.doc.scrollTop : e.pageY;

            
            SelfRecDraw.RecBox.style.width = Math.abs(currentX - SelfRecDraw.StartX) + "px";

            
            SelfRecDraw.RecBox.style.height = Math.abs(currentY - SelfRecDraw.StartY) + "px";



            if (currentX - SelfRecDraw.StartX < 0) {
                //如果当前的X大于起始的X
                SelfRecDraw.RecBox.style.left = currentX + "px";

            }
            if (currentY - SelfRecDraw.StartY < 0) {
            //如果当前的X大于起始的Y
                SelfRecDraw.RecBox.style.top = currentY + "px";

            }





        }

    }
    
    
    
    Skybot.LayoutDraw.prototype.AddEventListener=function(o,e,l)
    {   /// <summary>
        /// 移动
        /// </summary>
        /// <param name="o">HTML object 对像</param>
        /// <param name="e">event 名字</param>
        /// <param name="l">回调方法</param>
        
        //如果可以加入事件
        if(o.addEventListener)
        {
           o.addEventListener(e,l,false);
           
 
        }
        else{
        //加入事件
            if(o.attachEvent)
            {
                o.attachEvent("on"+e,function()
                {
                    l(window.event);
                });
                
            }
        }
    }
    
        Skybot.LayoutDraw.prototype.RemvoeEventListener=function(o,e,l)
    {   /// <summary>
        /// 移动
        /// </summary>
        /// <param name="o">HTML object 对像</param>
        /// <param name="e">event 名字</param>
        /// <param name="l">回调方法</param>
        
        //如果可以删除 事件
        if(o.removeEventListener)
        {
           o.removeEventListener(e,l,false);
           
 
        }
        else{
        //删除事件
            if(o.detachEvent)
            {
                o.detachEvent("on"+e,function()
                {
                    l(window.event);
                });
                
            }
        }
    }
    
    window.onload = function()
		{
			var oRect = new Skybot.LayoutDraw();
			
			oRect.AddEventListener(oRect.doc , 'mousedown' , oRect.Down);
			oRect.AddEventListener(oRect.doc , 'mouseup' , oRect.Up);
		}
    </script>
    <div>
    
    </div>
    </form>
</body>
</html>
